{include file="$header" /}
<section class="mk-personal">
    <mk-personal-public></mk-personal-public>
    <el-card class="box-card mk-personal-content">
        <div slot="header" class="clearfix">
            <span>{:lang("Account setup")}</span> 
            <el-link 
                style="float: right;" 
                :href="index_url('user/password')" 
                :underline="false">
                <el-button type="danger" icon="el-icon-setting" size="mini">{:lang("Change Password")}</el-button>
            </el-link>
        </div>
        <el-form 
            :model="user" 
            :rules="rules" 
            ref="user" 
            label-width="100px">
            <el-form-item prop="account">
                <mk-upload @success="successUpload($event)">
                    <el-avatar 
                        :size="126" 
                        :src="domain + user.cover" 
                        :key="user.cover">
                        {{user.nickname}}
                    </el-avatar>
                </mk-upload>
            </el-form-item>
            <el-form-item :label="lang('account')" prop="account">
                {{user.account}}
            </el-form-item>
            <el-form-item :label="lang('nickname')" prop="nickname">
                <el-input v-model="user.nickname" maxlength="12" show-word-limit></el-input>
            </el-form-item>
            <el-form-item :label="lang('describe')" prop="describe">
                <el-input v-model="user.describe" maxlength="255" show-word-limit></el-input>
            </el-form-item>
            <el-form-item :label="lang('email')" prop="email">
                <el-input v-model="user.email" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="lang('mobile')" prop="mobile">
                <el-input v-model="user.mobile" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button 
                    size="small" 
                    type="primary" 
                    @click="submitForm()" 
                    :loading="loading">
                    {{lang('determine')}}
                </el-button>
                <el-button size="small" @click="resetForm()">{{lang('Reset')}}</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</section>
{include file="$component" /}
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                user: userInfo,
                url: "user/set",
                loading: false,
                rules: {
                    nickname: [
                        { required: true, message: lang('Please fill in the nickname'), trigger: 'blur' },
                    ],
                    describe: [
                        { required: true, message: lang('Please fill in your profile'), trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            /**
             * 提交
             */
            submitForm() {
                let self = this;
                    self.$refs.user.validate((valid) => {
                        if (valid) {
                            self.loading = true;
                            request.post(self.url, self.user, function(res){
                                self.loading = false;
                                self.$message({ showClose: true, message: res.message, type: res.status });
                            });
                        } else {
                            return false;
                        }
                    });
            },
            /**
             * 重置
             */
            resetForm() {
                this.$refs.user.resetFields();
            },
        }
    });
</script>
{include file="$footer" /}